<template>
  <a-layout-content class="bg-white">
    <div class="row" id="toright">
      <div class="row">
        <el-button @click="drawer = true" type="primary" size="small">添加课程包</el-button>
      </div>
    </div>
    <template>
      <el-table :data="packegekey" border style="width: 100%">
        <el-table-column prop="ID" label="序号" width="180"></el-table-column>
        <el-table-column prop="name" label="课程包名称" width="180"></el-table-column>
        <el-table-column prop="info" label="备注" width="180"></el-table-column>
        <el-table-column label="使用日期">
          <template
            slot-scope="scope"
          >{{scope.row.createdAt | formatDate}}—{{scope.row.createdAt | formatDate}}</template>
        </el-table-column>
      </el-table>
    </template>
    <el-drawer title="添加课程包" :visible.sync="drawer">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="课程包" prop="packegekeyid">
          <el-select v-model="ruleForm.packegekeyid" placeholder="请选择课程包">
            <el-option
              v-for="(v, i)  in this.getPackege"
              :key="`1adminschoolcoures${i}`"
              :label="v.packegeName"
              :value="v.ID"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="名称" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="介绍" prop="info">
          <el-input v-model="ruleForm.info"></el-input>
        </el-form-item>

        <el-form-item label="到期时间" prop="time">
          <el-date-picker v-model="ruleForm.time" type="date" placeholder="选择日期"></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="addpackegekey('ruleForm')">立即创建</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>
  </a-layout-content>
</template>

<script>
import { mapGetters } from "vuex";
import { asyncaddschoolpackegekey } from "../../../plugins/api.js";
import moment from "moment";
export default {
  name: "adminschoolcoures",
  data() {
    const validatePass = (rule, value, callback) => {
      const n = new Date();
      if (value === "") {
        callback(new Error("请填写日期"));
      } else if (n.getTime() > new Date(value).getTime()) {
        callback(new Error("结束时间必须大于现在时间"));
      } else {
        callback();
      }
    };
    return {
      drawer: false,
      ruleForm: {
        time: "",
        packegekeyid: "",
        schoolid: "",
        info: "",
        name: ""
      },
      rules: {
        name: [
          { required: true, message: "请输入名称", trigger: "blur" },
          { min: 2, max: 30, message: "长度在 2 到 30 个字符", trigger: "blur" }
        ],
        time: [{ validator: validatePass, trigger: "blur" }],
        packegekeyid: [
          { required: true, message: "请选择课程包", trigger: "change" }
        ]
      }
    };
  },
  props: ["ID"],
  filters: {
    formatDate(value) {
      return moment(value).format("YYYY-MM-DD");
    }
  },
  computed: {
    ...mapGetters("school", ["getschool", "getschoolpackegekey"]),
    ...mapGetters(["getPackege"]),
    packegekey() {
      return this.getschoolpackegekey.filter(v => v.schoolid == this.ID);
    }
  },
  watch: {
    "ruleForm.packegekeyid"(i) {
      if (!this.ruleForm.name) {
        this.ruleForm.name = this.getPackege.find(v => v.ID == i).packegeName;
      }
    }
  },
  methods: {
    addpackegekey(formName) {
      this.$refs[formName].validate(async valid => {
        if (valid) {
          try {
            this.ruleForm.schoolid = this.ID;
            await asyncaddschoolpackegekey(this.ruleForm);
            this.$store.dispatch("school/actionschoolpackegekey");
            this.$message("添加成功");
            this.drawer = false;
          } catch (err) {
            this.$message.error("err");
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    }
  }
};
</script>

<style scoped>
.custom-block {
  border-color: "#dfdfdf";
  padding: 0.1rem 1.5rem;
  border-left-width: 0.5rem;
  border-left-style: solid;
  margin: 1rem 0;
}
.bg-white {
  padding-left: 35px;
  padding-right: 35px;
}
#toright {
  float: right;
  margin-right: 15px;
  margin-bottom: 15px;
}
</style>
